<!--
 * @Description: file content
-->
<template>
  <div class="common-layout">
    <el-container>
      <SideMenu />
      <el-container direction="vertical">
        <TopHeader />
        <el-main>
          <div class="app-breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item class="myColor" :to="{ path: '/index' }">首页</el-breadcrumb-item>
              <slot v-for="(item, index) in RouteConfig">
                <el-breadcrumb-item
                  v-if="item.name.includes(route.name)"
                  :key="index"
                  :to="{ path: item.path }"
                  >{{ item?.meta?.title }}</el-breadcrumb-item
                >
              </slot>
            </el-breadcrumb>
          </div>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import SideMenu from '@/components/mainBox/SideMenu.vue';
import TopHeader from '@/components/mainBox/TopHeader.vue';
import RouteConfig from '@/router/routeConfig';

const route = useRoute();
{
  SideMenu, TopHeader;
}
</script>
<style lang="scss" scoped>
.app-breadcrumb {
  margin-bottom: 20px;
}
</style>
